<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" href="../../assets/libs/layui/css/layui.css">
	</head>

	<body>
	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
			<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
		</div>
	</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	</body>

	<script src="../../assets/libs/layui/layui.js"></script>
	<script src="../../assets/js/my.js"></script>
	<script>
		layui.use(['table','jquery','layer'], function(){
			var table = layui.table;
			var $=layui.jquery;
			var layer=layui.layer

			table.render({
				elem: '#test'
				,url:'/userservlet/list'
				,toolbar: '#toolbarDemo'
				,title: '用户数据表'
				,cols: [[
					{type: 'checkbox', fixed: 'left'}
					,{field:'uId', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
					,{field:'uName', title:'用户姓名', width:120, edit: 'text'}

					,{field:'uGender', title:'性别', width:80, edit: 'text', sort: true}
					,{field:'uAge', title:'年龄', width:80, edit: 'text', sort: true}
					,{field:'uBirthday', title:'生日', width:80, edit: 'text', sort: true}
					,{field:'uEmail', title:'邮箱', width:150, edit: 'text'}
					,{field:'uMessage', title:'留言', width:80, edit: 'text'}
					,{field:'uTime', title:'预约时间', width:80, edit: 'text',sort:true}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
				]]
				,page: true
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj){
				var checkStatus = table.checkStatus(obj.config.id);
				switch(obj.event){
					case 'getCheckData':
						var data = checkStatus.data;
						layer.alert(JSON.stringify(data));
						break;
					case 'getCheckLength':
						var data = checkStatus.data;
						layer.msg('选中了：'+ data.length + ' 个');
						break;
					case 'isAll':
						layer.msg(checkStatus.isAll ? '全选': '未全选');
						break;
				};
			});

			//监听行工具事件
			table.on('tool(test)', function(obj){
				 var data = obj.data;
				//console.log(obj)
				if(obj.event === 'del'){
					 layer.confirm('真的删除么', function(index){
					 	obj.del();
					 	layer.close(index);
						 // alert(data.uId);
						$.post(host+'/userservlet/removeById',{id:data.uId},function (r) {
							if(r.code==0){
								layer.msg("删除成功");
							}else{
								layer.msg("删除失败");
							}
						},'json')
					 });
				} else if(obj.event === 'edit'){
					layer.open({
						type:2,
						content:['userUpdate.html'],
						area:['600px','400px'],
						maxmin: true,
							success:function (layero,index) {
								var body = layer.getChildFrame('body', index);
								// var iframeWin = window[layero.find('iframe')[0]['name']];
								body.find("#uId").val(data.uId);
								body.find("#uName").val(data.uName);
								body.find("#uGender").val(data.uGender);
								body.find("#uAge").val(data.uAge);
								body.find("#uEmail").val(data.uEmail);
								body.find("#date1").val(data.uBirthday);
								body.find("#uMessage").val(data.uMessage);
							},

					cancel:function (index){
						$(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
					}

				})
				}
			});

		});
	</script>
</html>